<template>
  <div class="menu-main">
    <Menu :theme="'light'" :active-name="activeName" :open-names="['1']" @on-select="gotoMenu" style="width: 100%">
      <Submenu v-for="mainMenu in menuList" :key="mainMenu.id" :name="mainMenu.id">
        <template slot="title">
          <div style="display: flex">
            <Icon :custom="mainMenu.icon" class="iconfont" style="font-size: 16px; margin-right: 8px" />
            <div>{{ mainMenu.name }}</div>
            <div style="flex-grow: 1"></div>
          </div>
        </template>
        <MenuItem v-for="subMenu in mainMenu.subList" :key="subMenu.id" :name="subMenu.id" ref="menuItemRef">
          <div style="padding-left: 0px" class="text-max-len" :title="subMenu.name">{{ subMenu.name }}</div>
        </MenuItem>
      </Submenu>
    </Menu>
  </div>
</template>

<script>
export default {
  name: 'MenuPanel',
  props: {
    menuList: {
      type: Array,
    },
    curMenu: {
      type: String,
    },
  },
  computed: {
    activeName() {
      if (this.curMenu) {
        return this.curMenu;
      }
      let retVal = 'test1';
      if (this.menuList.length > 0) {
        const firstLevel = this.menuList[0];
        retVal = firstLevel.id;
        if (firstLevel.subList && firstLevel.subList.length > 0) {
          const secondLevel = firstLevel.subList[0];
          retVal = secondLevel.id;
        }
      }
      return retVal;
    },
  },
  methods: {
    gotoMenu(name) {
      let menuItem;
      this.menuList.forEach(mainObj => {
        mainObj.subList.forEach(subObj => {
          if (subObj.id === name) {
            menuItem = subObj;
          }
        });
      });
      this.$emit('choose-menu', menuItem);
    },
  },
};
</script>

<style scoped>
.menu-main /deep/ .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu) {
  background: inherit;
}
.menu-main /deep/ .ivu-menu-light.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu):after {
  background: inherit;
}
.menu-main /deep/ .ivu-menu-vertical .ivu-menu-item:hover,
.menu-main /deep/ .ivu-menu-vertical .ivu-menu-submenu-title:hover {
  background: #f3f3f3;
}

.menu-main {
  height: 100%;
  width: 200px;
  overflow-y: auto;
  border-right: 1px solid #d7dde4;
  z-index: 3;
}

.menu-main /deep/ .ivu-menu-submenu-title {
  padding: 14px 16px;
}

.menu-main /deep/ .ivu-menu-submenu-title-icon {
  right: 16px;
}

.ivu-menu-vertical.ivu-menu-light:after {
  content: none;
}

.text-max-len {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
